<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightsteelblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="hide">隐藏效果</button>
<button id="show">显示效果</button>
<button id="hideAndShow">隐藏然后显示</button>
<br>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeInAndOut">淡入淡出</button>
<div class="box"></div>
<div class="outter">
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
</div>

<script>
    $(function () {
        $('#hide').click(function () {
            $('.box').hide(2000, function () {
                alert("隐藏完了")
            })
        })
        $('#show').dblclick(function () {
            $('.box').show(2000, function () {
                alert('显示出来')
            })
        })
        $('#hideAndShow').click(function () {
            //如果隐藏就显示,如果显示,就隐藏
            $('.box').toggle(1000)
        })
        /*------------------------------------------------*/
        $('#fadeIn').click(function () {
            $('#box1').fadeIn('fast');
            $('#box2').fadeIn('slow');
            $('#box3').fadeIn(3000);
        })
        $('#fadeOut').click(function () {
            $('#box3').fadeOut('fast');
            $('#box2').fadeOut('slow');
            $('#box1').fadeOut(3000);
        })
        $('#fadeInAndOut').click(function () {
            $('#box1').fadeToggle('fast');
            $('#box2').fadeToggle('slow');
            $('#box3').fadeToggle(3000);
        })
    })
</script>
</body>
</html>